<template>
	<div class="orderList">
		<div class="item" v-for="(item,index) of listData"  :key="index">
			<div class="item-left">
				<div class="name">{{item.goods_name}}</div>
				<div class="time">{{item.created_at}}</div>
			</div>
			<div class="item-right">
				<div>-300</div>
			</div>
		</div>
		
		<div class="no-tips" v-if="listData.length==0">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
			<div>暂未兑换过积分商品</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pageNum:1,
				listData:[]
			};
		},
		methods:{
			async getIntegralExchangeList(){
				//获取列表
				let params={
					limit:20,
					page:this.pageNum,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.getIntegralExchangeList(params);
				if(res.data.level=='success'){
					this.listData=[...this.listData,...res.data.data]
				}
			}
		},
		onReachBottom() {
			this.pageNum++;
			this.getIntegralExchangeList()
		},
		onLoad() {
			this.getIntegralExchangeList()
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.no-tips{
		margin-top:20vh;
		@include flexWrap();
		background: #fff;
		color:#6F7073;
		&>div{
			text-align: center;
			width: 100%;
		}
		}
	.orderList{
		margin:0 30rpx;
		.item{
			@include flex(space-between);
			margin:20rpx 0 55rpx 0;
			.item-left{
				.name{
					height:30rpx;
					font-size:30rpx;
					color:rgba(0,0,0,1);
					line-height:30rpx;
				}
				.time{
					height:26rpx;
					margin-top: 20rpx;
					font-size:26rpx;
					color:rgba(139,141,147,1);
					line-height:26rpx;
				}
			}
			.item-right{
				color:#FD5F2A;
				height:26rpx;
				font-size:26rpx;
				color:rgba(253,95,42,1);
				line-height:26rpx;
			}
		}
	}
</style>
